<template>
    <div class="warehouse-list-container">
        <span style="font-size: 30px;position: relative; top: -10px ;">员工列表</span>
        <div class="add-button-bottom-right">
            <el-button class="add-button" @click="showAddEmployee">新增员工</el-button>
        </div>
        <el-divider></el-divider>
        <el-table :data="employeeData" border style="width: 100%" class="centered-table">
            <el-table-column prop="employee_id" label="序号" width="auto"></el-table-column>
            <el-table-column prop="employee_name" label="员工姓名" width="auto"></el-table-column>
            <el-table-column prop="employee_sex" label="性别" width="auto"></el-table-column>
            <el-table-column prop="employee_birth" label="出生年月" width="auto">
                <template slot-scope="scope">
                    <span>{{ formatDate(scope.row.employee_birth) }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="employee_phone" label="联系方式" width="auto"></el-table-column>
            <el-table-column prop="employee_hire" label="聘用日期" width="auto">
                <template slot-scope="scope">
                    <span>{{ formatDate(scope.row.employee_hire) }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="employee_state" label="聘用仓库状态" width="auto">
                <template slot-scope="scope">
                    <span :style="{ color: scope.row.employee_state === '1' ? '#4FC1B0' : 'red' }">
                        {{ statusText(scope.row.employee_state) }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="250">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" icon="el-icon-edit"
                        @click="handleEdit(scope.row)">修改</el-button>
                    <el-button size="mini" type="danger" icon="el-icon-delete"
                        @click="handleDelete(scope.row.employee_id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-divider></el-divider>
        <!-- 分页 -->
        <el-pagination class="pagination" @size-change="change" @current-change="Ymchange" :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="rows">
        </el-pagination>
        <!-- 添加模态框 -->
        <el-dialog title="添加" :visible.sync="isAddModalVisible" width="400px" :close-on-click-modal="false" class="qw">
            <el-form :model="form" label-width="100px">
                <el-form-item label="员工姓名*">
                    <el-input class="kehan" v-model="form.employee_name" autocomplete="off"
                        placeholder="员工姓名"  maxlength="10" show-word-limit>
                        </el-input>
                </el-form-item>
                <!-- <el-form-item label="性别">
                    <el-select v-model="form.employee_sex" placeholder="请选择" class="kehan">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="性别*">
                      <el-radio-group v-model="form.employee_sex">
                            <el-radio label="男">男</el-radio>
                            <el-radio label="女">女</el-radio>
                           </el-radio-group>
                </el-form-item>
                <el-form-item label="出生年月*">
                    <el-date-picker v-model="form.employee_birth" type="date" placeholder="选择日期" class="kehan">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="联系方式*">
                    <el-input v-model="form.employee_phone" autocomplete="off" placeholder="联系方式"
                        class="kehan"  maxlength="11"  show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="聘用日期*">
                    <el-date-picker v-model="form.employee_hire" type="date" placeholder="选择日期" class="kehan">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="聘用状态*">
                    <el-select v-model="form.employee_state" placeholder="请选择" class="kehan">
                        <el-option label="在岗" value="1"></el-option>
                        <el-option label="解雇" value="0"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div>
                <span slot="footer" style="display: flex; justify-content: center;">
                    <el-button @click="isAddModalVisible = false"
                        style="margin-right: 20px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;">取消</el-button>
                    <el-button type="primary" @click="submitForm"
                        style="margin-left: 20px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;">确定</el-button>
                </span>
            </div>
        </el-dialog>

        <!-- 修改模态框 -->
        <el-dialog title="修改" :visible.sync="isEditModalVisible" width="400px" :close-on-click-modal="false" class="qw">
            <el-form :model="editForm" label-width="100px">
                <el-form-item label="仓库Id">
                    <el-input v-model="editForm.employee_id" autocomplete="off" placeholder="仓库Id" disabled
                        class="kehan"></el-input>
                </el-form-item>
                <el-form-item label="员工姓名">
                    <el-input v-model="editForm.employee_name" autocomplete="off" placeholder="员工姓名"
                        class="kehan"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-select v-model="editForm.employee_sex" placeholder="请选择" class="kehan">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="出生年月">
                    <el-date-picker v-model="editForm.employee_birth" type="date" placeholder="选择日期" class="kehan">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-input v-model="editForm.employee_phone" autocomplete="off" placeholder="联系方式"
                        class="kehan"></el-input>
                </el-form-item>
                <el-form-item label="聘用日期">
                    <el-date-picker v-model="editForm.employee_hire" type="date" placeholder="选择日期" class="kehan">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="聘用状态">
                    <el-select v-model="editForm.employee_state" placeholder="请选择" class="kehan">
                        <el-option label="在岗" value="1"></el-option>
                        <el-option label="解雇" value="0"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div>
                <span slot="footer" style="display: flex; justify-content: center;">
                    <el-button @click="isEditModalVisible = false"
                        style="margin-right: 20px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;">取消</el-button>
                    <el-button type="primary" @click="updateWarehouse"
                        style="margin-left: 20px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;">修改</el-button>
                </span>
            </div>
        </el-dialog>
        <div>
        </div>
    </div>

</template>
<script>
import axios from 'axios';
import { MessageBox } from 'element-ui';
import $http from '@/routers/base';
export default {
    data() {
        return {
            employeeData: [],
            currentPage: 1, //当前页
            pageSize: 10, //每页显示数
            rows: 0, //总行数
            isAddModalVisible: false,  //添加模态框
            isEditModalVisible: false,  //修改模态框
            form: {
                employee_name: '',
                employee_sex: '',
                employee_birth: '',
                employee_phone: '',
                employee_hire: '',
                employee_state: ''
            },
            editForm: {
                employee_id: '',
                employee_name: '',
                employee_sex: '',
                employee_birth: '',
                employee_phone: '',
                employee_hire: '',
                employee_state: ''
            }
        };
    },
    methods: {
        //日期转型
        formatDate(dateString) {
            if (!dateString) {
                return '';
            }
            const date = new Date(dateString);
            if (isNaN(date.getTime())) {
                return '';
            }
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            return `${year}-${month}-${day}`;
        },
        //分页
        async fetchData() {
            this.where = "1=1";
            // 向后端请求数据，并更新客户数据和总条数
            $http.get('Employee/getFenYe', {
                params: {
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                    where: this.where
                }
            }).then(res => {
                this.employeeData = res.employeeData;
                this.rows = res.rows;
            }).catch(error => {
                console.error('Error fetching client data: ', error);
            });
        },
        change: function (size) {
            this.pageSize = size;
            this.currentPage = 1;
            this.fetchData();
        },
        Ymchange: function (page) {
            this.currentPage = page;
            this.fetchData();
        },
        //添加员工
        async submitForm() {
            // 验证表单是否为空
            if (this.validateForm()) {
                // 发送 POST 请求来添加员工
            $http.post('Employee/AddEmployee', this.form)
                .then(response => {
                    if (response) {
                        // 清空表单
                        this.form.employee_name = '',
                            this.form.employee_sex = '',
                            this.form.employee_birth = '',
                            this.form.employee_phone = '',
                            this.form.employee_hire = '',
                            this.form.employee_state = '',
                            this.isAddModalVisible = false;
                        // 更新数据
                        this.fetchData();
                        // 显示成功消息
                        this.$message.success('添加成功！');
                    } else {
                        this.$message.error('添加失败！请重新添加！');
                    }
                }).catch(error => {
                    //this.$message.error('添加失败：' + error.message);
                });
            }
        },
        //添加状态显示
        statusText(status) {
            return status === '1' ? '在岗' : '解雇';
        },
        //添加非空判断
        validateForm() {
      if (!this.form.employee_name || this.form.employee_name.length < 1 || this.form.employee_name.length >20) {
       this.$message.error('员工名称长度应在0到20个字符之间');
       return false;
    }
    if (!this.form.employee_sex) {
      this.$message.error('性别不能为空');
        return false;
  } 
    if (/\d/.test(this.form.employee_name)) {
       this.$message.error('员工姓名不能包含数字');
      return false;
  }
      if (!this.form.employee_phone || this.form.employee_phone.length !== 11) {
    this.$message.error('电话号码长度应为11位');
    return false;
  }
   if (!this.form.employee_birth) {
       this.$message.error('出生年月不能为空');
       return false;
  }
   if (!this.form.employee_hire) {
      this.$message.error('聘用日期不能为空');
       return false;
  }
  if (!this.form.employee_state) {
      this.$message.error('聘用状态不能为空');
      return false;
  }
    return true; // 表单验证通过
    },
        //添加按钮
        showAddEmployee() {
            this.isAddModalVisible = true;
        },
        //修改显示
        handleEdit(row) {
            this.$set(this.editForm, 'employee_id', row.employee_id); this.$set(this.editForm, 'employee_name', row.employee_name);
            this.$set(this.editForm, 'employee_hire', row.employee_hire);
            this.$set(this.editForm, 'employee_birth', row.employee_birth); this.$set(this.editForm, 'employee_phone', row.employee_phone);
            this.$set(this.editForm, 'employee_sex', row.employee_sex); this.$set(this.editForm, 'employee_state', row.employee_state);
            this.isEditModalVisible = true;
        },
        // 修改员工信息
        async updateWarehouse() {
            // 检查必填字段是否为空
            if (this.editForm.employee_name.trim() === '' ||
                this.editForm.employee_sex.trim() === '' ||
                this.editForm.employee_phone.trim() === '' ||
                this.editForm.employee_hire.trim() === '' ||
                this.editForm.employee_state.trim() === '') {
                this.$message.error('所有带的字段都不能为空！');
                return;
            }
            $http.put('Employee/updateEmployee', this.editForm)
                .then(response => {
                    if (response) {
                        // 关闭模态框
                        this.isEditModalVisible = false;
                        // 刷新数据
                        this.fetchData();
                        // 显示成功消息
                        this.$message.success('修改成功！');
                    } else {
                        this.$message.error('修改失败，请重试！');
                    }
                })
                .catch(error => {
                    this.$message.error('修改失败：' + error.message);
                });
        },
        //修改非空判断
        async validateEditForm() {
            return this.editForm.employee_name.trim() != '' && this.editForm.employee_sex.trim() != '' && this.editForm.employee_birth.trim() != '' && this.editForm.employee_phone.trim() != ''
                && this.editForm.employee_hire.trim() != '' && this.editForm.employee_state.trim() != '';
        },
        //逻辑删除
        async handleDelete(employee_id) {
            MessageBox.confirm('确认删除删除该条记录吗？, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                $http.delete(`Employee/DeleteEmployee/${employee_id}`)
                    .then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功！'
                        })
                        this.fetchData();
                    }).catch(error => {
                        this.$message.error('删除失败：' + error.message)
                    })
            })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '管理员取消了删除,删除无效哦！'
                    })
                })
        },
        handleSizeChange(newSize) {
            this.pageSize = newSize;
        },
        handleCurrentChange(newPage) {
            this.currentPage = newPage;
        },
    },
    mounted() {
        this.fetchData();
    },

};
</script>

<style scoped>
.kehan {
    width: 215px;
}

.warehouse-list-container {
    background-color: #ffffff;
    padding: 20px;
}

.centered-table .el-table__cell {
    text-align: center;
}

.centered-table .el-table__header th {
    background-color: #eeeeee;
    ;
    /* 设置标题行的背景色 */
    color: #333;
    /* 设置标题行的文字颜色 */
}



.add-button {
    background-color: #4FC1B0;
    color: #ffffff;
}

.add-button-bottom-right {
    position: fixed;
    bottom: 0;
    top: 110px;
    /* 将按钮相对于父容器顶部定位 */
    right: 100px;
    margin: 20px;
    /* 调整
    按钮与分割线的距离 */
}

/* 调整对话框样式 */
.el-dialog__body {
    padding: 0px 10px 30px 20px;
    /* 调整内边距 */
}

/* 模态框 */
.qw {
    position: fixed;
    top: 15%;
    left: 10%;

    height: 750px;
    overflow: hidden;
}
</style>